<template>
  <div class="user-switcher">
    <el-dropdown trigger="click" @command="handleCommand">
      <div class="user-info-wrapper">
        <el-avatar :src="webInfoStore.currentWebUserAvatar" :size="32">
          {{ webInfoStore.currentWebUserNickname.charAt(0) }}
        </el-avatar>
        <span class="username">{{ webInfoStore.currentWebUserNickname }}</span>
        <el-icon class="arrow-icon"><ArrowDown /></el-icon>
      </div>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item disabled>
            <span class="current-user-label">当前用户</span>
          </el-dropdown-item>
          <el-dropdown-item disabled>
            <div class="current-user-info">
              <el-avatar :src="webInfoStore.currentWebUserAvatar" :size="40">
                {{ webInfoStore.currentWebUserNickname.charAt(0) }}
              </el-avatar>
              <div class="user-details">
                <div class="nickname">{{ webInfoStore.currentWebUserNickname }}</div>
                <div class="username-small">@{{ webInfoStore.currentWebUsername }}</div>
              </div>
            </div>
          </el-dropdown-item>
          <el-dropdown-item divided command="switch">
            <el-icon><Switch /></el-icon>
            <span>切换用户</span>
          </el-dropdown-item>
          <el-dropdown-item command="logout">
            <el-icon><SwitchButton /></el-icon>
            <span>退出当前用户</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router"
import { ElMessageBox, ElMessage } from "element-plus"
import { ArrowDown, Switch, SwitchButton } from "@element-plus/icons-vue"
import { useWebInfoStore } from "@/store/modules/webInfo"

const router = useRouter()
const webInfoStore = useWebInfoStore()

const handleCommand = (command: string) => {
  switch (command) {
    case "switch":
      switchUser()
      break
    case "logout":
      logoutUser()
      break
  }
}

const switchUser = () => {
  ElMessageBox.confirm(
    "切换用户后将返回到用户选择页面，是否继续？",
    "切换用户",
    {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning"
    }
  ).then(() => {
    router.push("/pseudo-login")
  })
}

const logoutUser = () => {
  ElMessageBox.confirm(
    "确定要退出当前用户吗？",
    "退出确认",
    {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning"
    }
  ).then(() => {
    webInfoStore.clearCurrentWebUser()
    ElMessage.success("已退出")
    router.push("/pseudo-login")
  })
}
</script>

<style scoped lang="scss">
.user-switcher {
  .user-info-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s;
    background: rgba(255, 255, 255, 0.1);

    &:hover {
      background: rgba(255, 255, 255, 0.2);
    }

    .username {
      font-size: 14px;
      font-weight: 500;
      color: #333;
      max-width: 100px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .arrow-icon {
      font-size: 12px;
      color: #666;
      transition: transform 0.3s;
    }
  }
}

.current-user-label {
  font-size: 12px;
  color: #999;
  font-weight: 600;
}

.current-user-info {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;

  .user-details {
    .nickname {
      font-size: 15px;
      font-weight: 600;
      color: #333;
      margin-bottom: 4px;
    }

    .username-small {
      font-size: 12px;
      color: #999;
    }
  }
}

:deep(.el-dropdown-menu__item) {
  display: flex;
  align-items: center;
  gap: 8px;
}
</style>

